/*
 * @Author: swf 
 * @Date: 2019-05-22 11:23:16 
 * @Last Modified by: swf
 * @Last Modified time: 2019-05-23 17:47:23
 */

var writer;
var isCharVisible;
var isOutlineVisible;

function printStrokePoints(data) {
    var pointStrs = data.drawnPath.points.map(point => `{x: ${point.x}, y: ${point.y}}`);
    console.log(`[${pointStrs.join(', ')}]`);
}
/**
 *显示文字 写字
 * @param {*} text 需要书写的文字
 */
function updateCharacter(text) {
    document.querySelector('#target').innerHTML = '';
    writer = HanziWriter.create('target', text, {
        width: 400,
        height: 400,
        // radicalColor: '#f03107',
        onCorrectStroke: printStrokePoints,
        onMistake: printStrokePoints,
    });
    isCharVisible = true;
    isOutlineVisible = true;
    window.writer = writer;
    writer.hideCharacter()

    setTimeout(function () {
        writer.animateCharacter();
    }, 1000)

}

/**
 *文字转语音
 *
 * 这里调用的是百度文字转语音开放API
 * lan=zh（语言zh:中文；en:英文；fr:法文；）
 * ie=UTF-8（字符集）
 * per=3（每3个字符停顿）
 * spd=5（语音播放速度，数字越大越快0-15）
 * text=""（需要转换的文字）
 * @param {*} ttsText 需要转换的文字
 */
function doTTS(ttsText) {
    var ttsDiv = document.getElementById('bdtts_div_id');
    var ttsAudio = document.getElementById('tts_autio_id');

    // 文字转语音
    ttsDiv.removeChild(ttsAudio);
    var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
    var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=4&spd=5&text=' + ttsText + '" type="audio/mpeg">';
    var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
    var au2 = '</audio>';
    ttsDiv.innerHTML = au1 + sss + eee + au2;

    ttsAudio = document.getElementById('tts_autio_id');

    ttsAudio.play();
}


/**
 * 文字转语音
 * ** SpeechSynthesisUtterance 对象 主要用来构建语音合成实例
 *属性
 * lang：使用的语言，字符串（比如："zh-cn"）
 * volume：音量，值在0-1之间（默认是1）
 * rate：语速的倍数，值在0.1-10之间（默认1倍）
 * pitch：音高，值在0-2之间，（默认是1）
 * voiceURI：指定希望使用的声音，字符串
 * text=""（需要转换的文字）
 * 
 * 回调函数
 * onstart：语音开始合成时触发
 * onpause：语音暂停时触发
 * onresume：语音合成重新开始时触发
 * onend：语音结束时触发
 * 
 * ** speechSynthesis 对象 控制合成行为
 * speak(); 只能接收SpeechSynthesisUtterance作为唯一的参数，作用是读合成的话语。
 * stop(); 立即终止合成过程
 * pause(); 暂停合成过程。
 * resume(); 重新开始合成过程。
 * getVoices(); 此方法不接受任何参数，用来返回浏览器支持的语音包列表，是个数组。
 * 
 * @param {*} ttsText 需要转换的文字
 */

function doTTSh5(ttsText) {

    var msg = new SpeechSynthesisUtterance();
    msg.text = ttsText

    window.speechSynthesis.speak(msg);
    // console.log(window.speechSynthesis.getVoices())

}

/**
 * 获得拼音
 *
 */
function getPinyin(text) {
    /**
     * pinyinUtil.getPinyin() 调用pinyin工具
     * 参数1：需要转换的文字
     * 参数2：以空格分隔
     * 参数3：是否带音标
     * 参数4：是否支持多音字
     */
    var result = pinyinUtil.getPinyin(text, ' ', true, false)

    var html = result;
    if (result instanceof Array) {
        html = '<ol>';
        result.forEach(function (val) {
            html += '<li>' + val + '</li>';
        });
        html += '</ol>';
    }
    document.getElementById('pinyinResult').innerHTML = html;
}



window.onload = function () {
    document.querySelector('#hanziInput').addEventListener('keyup', function (event) {
        // 键盘按键弹起事件  禁止非中文内容
        this.value = this.value.replace(/[^\u4E00-\u9FA5]/g, '');

        if (event.keyCode == 13) {
            // 回车键
            updateCharacter(this.value);
            // doTTS(this.value)
            doTTSh5(this.value)
            getPinyin(this.value)
            document.querySelector('#readBtn').style.display = 'block';
        }


    })
    document.querySelector('#hanziInput').addEventListener('beforepaste', function () {
        // 粘贴事件 禁止非中文内容
        clipboardData.setData('text', clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g, ''));
    })

    document.querySelector('#confirm').addEventListener('click', function () {
        // 点击事件
        var myText = document.querySelector('#hanziInput').value;
        if (myText != '') {
            updateCharacter(myText);
            doTTS(myText)
            // doTTSh5(myText)
            getPinyin(myText)
            document.querySelector('#readBtn').style.display = 'block';
        }

    })

    document.querySelector('#readBtn').addEventListener('click', function () {
        // 点击事件
        var myText = document.querySelector('#hanziInput').value;
        if (myText != '') {
            // doTTS(myText)
            doTTSh5(myText)
        }

    })
}